<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flat UI Pro</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->    
    <link href="css/flat-ui.css" rel="stylesheet">
    <link href="css/demo.css" rel="stylesheet">

    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
  
    <h1 class="demo-headline">Basic Elements</h1>
    <div class="container">
      <div class="demo-row demo-buttons">
        <div class="demo-title">
          <h3 class="demo-panel-title">Button States</h3>
        </div>

        <div class="demo-col">
          <a href="#fakelink" class="btn btn-lg btn-block btn-primary">Primary Button</a>
          <a href="#fakelink" class="btn btn-lg btn-block btn-warning">Warning Button</a>
          <a href="#fakelink" class="btn btn-lg btn-block btn-default">Default Button</a>
          <a href="#fakelink" class="btn btn-lg btn-block btn-danger">Danger Button</a>
        </div>

        <div class="demo-col">
          <a href="#fakelink" class="btn btn-lg btn-block btn-success">Success Button</a>
          <a href="#fakelink" class="btn btn-lg btn-block btn-inverse">Inverse Button</a>
          <a href="#fakelink" class="btn btn-lg btn-block btn-info">Info Button</a>
          <a href="#fakelink" class="btn btn-lg btn-block disabled">Disabled Button</a>
        </div>
      </div> <!-- /row -->

      <div class="demo-row demo-buttons">
        <div class="demo-title">
          <h3 class="demo-panel-title">Button Sizes</h3>
        </div>

        <div class="demo-col">
          <a href="#fakelink" class="btn btn-hg btn-block btn-primary">Huge Button</a>
          <a href="#fakelink" class="btn btn-block btn-primary">Default Button</a>
          <a href="#fakelink" class="btn btn-xs btn-block btn-primary">Mini Button</a>
        </div>

        <div class="demo-col">
          <a href="#fakelink" class="btn btn-lg btn-block btn-primary">Large Button</a>
          <a href="#fakelink" class="btn btn-sm btn-block btn-primary">Small Button</a>
        </div>
      </div> <!-- /row -->

      <div class="demo-row demo-buttons">
        <div class="demo-title">
          <h3 class="demo-panel-title">Button Variants</h3>
        </div>

        <div class="demo-content">
          <a href="#fakelink" class="btn btn-hg btn-primary"><span class="fui-twitter"></span>&nbsp;&nbsp;It's a</a>
          <a href="#fakelink" class="btn btn-hg btn-primary mhm">Huge</a>
          <a href="#fakelink" class="btn btn-hg btn-primary">Button</a>
          <a href="#fakelink" class="btn btn-hg btn-primary mlm"><span class="fui-check-inverted"></span></a>
          <a href="#fakelink" class="btn btn-hg btn-primary btn-embossed mlm">Embossed</a>
          <a href="#fakelink" class="btn btn-hg btn-primary btn-block">Huge Fluid Button<span class="fui-arrow-right pull-right"></span></a>

          <a href="#fakelink" class="btn btn-lg btn-primary"><span class="fui-twitter"></span>&nbsp;&nbsp;It's a</a>
          <a href="#fakelink" class="btn btn-lg btn-primary mhm">Large</a>
          <a href="#fakelink" class="btn btn-lg btn-primary">Button</a>
          <a href="#fakelink" class="btn btn-lg btn-primary mlm"><span class="fui-check-inverted"></span></a>
          <a href="#fakelink" class="btn btn-lg btn-primary btn-embossed mlm">Embossed</a>
          <a href="#fakelink" class="btn btn-lg btn-primary btn-block">Large Fluid Button <span class="fui-arrow-right pull-right"></span></a>
          <a href="#fakelink" class="btn btn-primary"><span class="fui-twitter"></span> It's a</a>
          <a href="#fakelink" class="btn btn-primary mhm">Standard</a>
          <a href="#fakelink" class="btn btn-primary">Button</a>
          <a href="#fakelink" class="btn btn-primary mlm"><span class="fui-check-inverted"></span></a>
          <a href="#fakelink" class="btn btn-primary btn-embossed mlm">Embossed</a>
          <a href="#fakelink" class="btn btn-primary btn-block">Standard Fluid Button <span class="fui-arrow-right pull-right"></span></a>

          <a href="#fakelink" class="btn btn-sm btn-primary"><span class="fui-twitter"></span>&nbsp;&nbsp;It's a</a>
          <a href="#fakelink" class="btn btn-sm btn-primary mhm">Small</a>
          <a href="#fakelink" class="btn btn-sm btn-primary">Button</a>
          <a href="#fakelink" class="btn btn-sm btn-primary mlm"><span class="fui-check-inverted"></span></a>
          <a href="#fakelink" class="btn btn-sm btn-primary btn-embossed mlm">Embossed</a>
          <a href="#fakelink" class="btn btn-sm btn-primary btn-block">Small Fluid Button <span class="fui-arrow-right pull-right"></span></a>

          <a href="#fakelink" class="btn btn-xs btn-primary"><span class="fui-twitter"></span>&nbsp;&nbsp;It's a</a>
          <a href="#fakelink" class="btn btn-xs btn-primary mhm">Mini</a>
          <a href="#fakelink" class="btn btn-xs btn-primary">Button</a>
          <a href="#fakelink" class="btn btn-xs btn-primary mlm"><span class="fui-check-inverted"></span></a>
          <a href="#fakelink" class="btn btn-xs btn-primary btn-embossed mlm">Embossed</a>
          <a href="#fakelink" class="btn btn-xs btn-primary btn-block">Mini Fluid Button <span class="fui-arrow-right pull-right"></span></a>
        </div>
      </div> <!-- /row -->

      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Dropdowns</h3>
        </div>

        <div class="demo-col">
          <select name="huge" class="select-block mbl">
            <optgroup label="Profile">
              <option value="0">My Profile</option>
              <option value="1">My Friends</option>
            </optgroup>
            <optgroup label="System">
              <option value="2">Messages</option>
              <option value="3">My Settings</option>
              <option value="4" class="highlighted">Logout</option>
            </optgroup>
          </select>

          <select multiple="multiple" name="huge" class="select-block mbl">
            <option value="0">1</option>
            <option value="1" selected>2</option>
            <option value="2" selected>3</option>
            <option value="3" selected>4</option>
            <option value="4">5</option>
          </select>

          <div class="mbl">
            <div class="btn-group">              
              <button class="btn btn-primary btn-hg">Dropdown</button>
              <button class="btn btn-primary btn-hg dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <span class="dropdown-arrow dropdown-arrow-inverse"></span>
              <ul class="dropdown-menu dropdown-inverse">
                <li><a href="#fakelink">Sub Menu Element</a></li>
                <li><a href="#fakelink">Sub Menu Element</a></li>
                <li><a href="#fakelink">Sub Menu Element</a></li>
              </ul>
            </div>
          </div>

          <select name="info" class="select-block mbl">
            <optgroup label="Profile">
              <option value="0">My Profile</option>
              <option value="1">My Friends</option>
            </optgroup>
            <optgroup label="System">
              <option value="2">Messages</option>
              <option value="3">My Settings</option>
              <option value="4" class="highlighted">Logout</option>
            </optgroup>
          </select>

          <div class="mbl">
            <select multiple="multiple" name="info" class="select-block">
              <option value="0">1</option>
              <option value="1" selected>2</option>
              <option value="2" selected>3</option>
              <option value="3" selected>4</option>
              <option value="4">5</option>
            </select>
          </div>

          <div class="mbl">
            <div class="btn-group">              
              <button class="btn btn-info">Dropdown</button>
              <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <span class="dropdown-arrow dropdown-arrow-inverse"></span>
              <ul class="dropdown-menu dropdown-inverse">
                <li><a href="#fakelink">Sub Menu Element</a></li>
                <li><a href="#fakelink">Sub Menu Element</a></li>
                <li><a href="#fakelink">Sub Menu Element</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="demo-col">
          <select name="large" class="select-block mbl">
            <optgroup label="Profile">
              <option value="0">My Profile</option>
              <option value="1">My Friends</option>
            </optgroup>
            <optgroup label="System">
              <option value="2">Messages</option>
              <option value="3">My Settings</option>
              <option value="4" class="highlighted">Logout</option>
            </optgroup>
          </select>

          <div class="mbl">
            <select multiple="multiple" name="large" class="select-block">
              <option value="0">1</option>
              <option value="1" selected>2</option>
              <option value="2" selected>3</option>
              <option value="3" selected>4</option>
              <option value="4">5</option>
            </select>
          </div>

          <div class="mbl">
            <div class="btn-group">              
              <button class="btn btn-danger btn-lg">Dropdown</button>
              <button class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <span class="dropdown-arrow dropdown-arrow-inverse"></span>
              <ul class="dropdown-menu dropdown-inverse">
                <li><a href="#fakelink">Sub Menu Element</a></li>
                <li><a href="#fakelink">Sub Menu Element</a></li>
                <li><a href="#fakelink">Sub Menu Element</a></li>
              </ul>
            </div>
          </div>

          <select name="small" class="select-block mbl">
            <optgroup label="Profile">
              <option value="0">My Profile</option>
              <option value="1">My Friends</option>
            </optgroup>
            <optgroup label="System">
              <option value="2">Messages</option>
              <option value="3">My Settings</option>
              <option value="4" class="highlighted">Logout</option>
            </optgroup>
          </select>

          <div class="mbl">
            <select multiple="multiple" name="small" class="select-block">
              <option value="0">1</option>
              <option value="1" selected>2</option>
              <option value="2" selected>3</option>
              <option value="3" selected>4</option>
              <option value="4">5</option>
            </select>
          </div>

          <div class="mbl">
            <div class="btn-group">              
              <button class="btn btn-warning btn-sm">Dropdown</button>
              <button class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <span class="dropdown-arrow dropdown-arrow-inverse"></span>
              <ul class="dropdown-menu dropdown-inverse">
                <li><a href="#fakelink">Sub Menu Element</a></li>
                <li><a href="#fakelink">Sub Menu Element</a></li>
                <li><a href="#fakelink">Sub Menu Element</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div> <!-- /row -->

      <div class="demo-row demo-inputs">
        <div class="demo-title">
          <h3 class="demo-panel-title">Inputs</h3>
        </div>
        <div class="demo-col">
          <div class="form-group">
            <input type="text" value="" placeholder="Un-Active" class="form-control input-hg">
          </div>
          <div class="form-group">
            <input type="text" value="" placeholder="Un-Active" class="form-control input-lg">
          </div>
          <div class="form-group">
            <input type="text" value="" placeholder="Un-Active" class="form-control">
          </div>
          <div class="form-group">
            <input type="text" value="" placeholder="Un-Active" class="form-control input-sm">
          </div>
          <div class="form-group has-error">
            <input type="text" value="Error" class="form-control input-hg">
          </div>
          <div class="form-group has-error">
            <input type="text" value="Error" class="form-control input-lg">
          </div>
          <div class="form-group has-error">
            <input type="text" value="Error" class="form-control">
          </div>
          <div class="form-group has-error">
            <input type="text" value="Error" class="form-control input-sm">
          </div>
        </div>

        <div class="demo-col">
          <div class="form-group has-success">
            <input type="text" value="Success" class="form-control input-hg">
            <span class="input-icon fui-check-inverted"></span>
          </div>
          <div class="form-group has-success large">
            <input type="text" value="Success" class="form-control input-lg">
            <span class="input-icon fui-check-inverted"></span>
          </div>
          <div class="form-group has-success">
            <input type="text" value="Success" class="form-control">
            <span class="input-icon fui-check-inverted"></span>
          </div>
          <div class="form-group has-success">
            <input type="text" value="Success" class="form-control input-sm">
            <span class="input-icon fui-check-inverted"></span>
          </div>
          <div class="form-group">
            <input type="text" value="Disabled" disabled="disabled" class="form-control input-hg">
            <span class="input-icon fui-lock"></span>
          </div>
          <div class="form-group">
            <input type="text" value="Disabled" disabled="disabled" class="form-control input-lg">
            <span class="input-icon fui-lock"></span>
          </div>
          <div class="form-group">
            <input type="text" value="Disabled" disabled="disabled" class="form-control">
            <span class="input-icon fui-lock"></span>
          </div>
          <div class="form-group">
            <input type="text" value="Disabled" disabled="disabled" class="form-control input-sm">
            <span class="input-icon fui-lock"></span>
          </div>
        </div>
      </div><!-- /row -->

      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Input Variants</h3>
        </div>
        <div class="demo-col">        	          
        	<div class="form-group">
	        	<div class="input-group input-group-hg">
	            <input class="form-control" id="appendedInputButton-01" type="search" placeholder="Search">
	            <span class="input-group-btn">
	            	<button class="btn btn-default" type="button"><span class="fui-search"></span></button>
	            </span>            
	          </div>
        	</div>          
        	<div class="form-group">
	        	<div class="input-group input-group-lg">
	            <input class="form-control" id="appendedInputButton-02" type="search" placeholder="Search">
	            <span class="input-group-btn">
	            	<button class="btn btn-default" type="button"><span class="fui-search"></span></button>
	            </span> 
	          </div>
        	</div>          
          <div class="form-group">
          	<div class="input-group">
          	  <input class="form-control" id="appendedInputButton-03" type="search" placeholder="Search">
          	  <div class="input-group-btn">
          	    <button class="btn btn-default" type="button"><span class="fui-search"></span></button>
          	    <button class="btn btn-default" type="button"><span class="fui-gear"></span></button>
          	  </div>
          	</div>
          </div>
          <div class="form-group">
          	<div class="input-group input-group-sm">
          	  <input class="form-control" id="appendedInputButton-04" type="search" placeholder="Search">
          	  <span class="input-group-btn">
          	  	<button class="btn" type="button"><span class="fui-search"></span></button>
          	  </span>
          	</div>
          </div>
          <div class="form-group">
	        	<div class="input-group input-group-hg">
	            <span class="input-group-addon">@</span>
	            <input class="form-control" id="prependedInput-01" type="text" placeholder="twitter">
	          </div>
        	</div>
          <div class="form-group">
          	<div class="input-group input-group-lg">
          	  <span class="input-group-addon">@</span>
          	  <input class="form-control" id="prependedInput-02" type="text" placeholder="twitter">
          	</div>
          </div>
          <div class="form-group">
          	<div class="input-group">
          	  <span class="input-group-addon">@</span>
          	  <input class="form-control" id="prependedInput-03" type="text" placeholder="twitter">
          	</div>
          </div>
          <div class="form-group">
          	<div class="input-group input-group-sm">
          	  <span class="input-group-addon">@</span>
          	  <input class="form-control" id="prependedInput-04" type="text" placeholder="twitter">
          	</div>
          </div>
          <div class="form-group">
          	<div class="input-group">
          	  <span class="input-group-btn">
          	  	<button class="btn" type="button"><span class="fui-calendar"></span></button>
          	  </span>
          	  <input type="text" class="form-control" value="14 March, 2013" id="datepicker-01">
          	</div>
          </div>
          <div class="form-group">
        	  <input type="text" id="spinner-01" placeholder="" value="0" class="form-control spinner">
          </div>
        </div>

        <div class="demo-col">          
          <div class="form-group">
          	<div class="input-group">
          	  <input type="search" class="form-control" placeholder="Search" id="search-query-1">
          	  <span class="input-group-btn">
	          	  <button type="submit" class="btn"><span class="fui-search"></span></button>
          	  </span>
          	</div>
          </div>
          <div class="form-group">
	          <div class="input-group input-group-hg input-group-rounded">
              <span class="input-group-btn">
	          	  <button type="submit" class="btn"><span class="fui-search"></span></button>
          	  </span>
              <input type="search" class="form-control" placeholder="Search" id="search-query-2">
            </div>
          </div>
          <div class="form-group">
	          <div class="input-group input-group-lg input-group-rounded">
              <span class="input-group-btn">
	          	  <button type="submit" class="btn"><span class="fui-search"></span></button>
          	  </span>
              <input type="search" class="form-control" placeholder="Search" id="search-query-3">
            </div>
          </div>
          <div class="form-group">
	          <div class="input-group input-group-rounded">
              <span class="input-group-btn">
	          	  <button type="submit" class="btn"><span class="fui-search"></span></button>
          	  </span>
              <input type="search" class="form-control" placeholder="Search" id="search-query-4">
            </div>
          </div>
          <div class="form-group">
	          <div class="input-group input-group-sm input-group-rounded">   
	          	<span class="input-group-btn">
	          	  <button type="submit" class="btn"><span class="fui-search"></span></button>
          	  </span>           
              <input type="search" class="form-control" placeholder="Search" id="search-query-9">              
            </div>
          </div>
          <div class="form-group">
	          <div class="input-group input-group-hg input-group-rounded">              
              <input type="search" class="form-control" placeholder="Search" id="search-query-5">
              <span class="input-group-btn">
	          	  <button type="submit" class="btn"><span class="fui-search"></span></button>
          	  </span>
            </div>
          </div>
          <div class="form-group">
	          <div class="input-group input-group-lg input-group-rounded">              
              <input type="search" class="form-control" placeholder="Search" id="search-query-6">
              <span class="input-group-btn">
	          	  <button type="submit" class="btn"><span class="fui-search"></span></button>
          	  </span>
            </div>
          </div>
          <div class="form-group">
	          <div class="input-group input-group-rounded">              
              <input type="search" class="form-control" placeholder="Search" id="search-query-7">
              <span class="input-group-btn">
	          	  <button type="submit" class="btn"><span class="fui-search"></span></button>
          	  </span>
            </div>
          </div>
          <div class="form-group">
	          <div class="input-group input-group-sm input-group-rounded">              
              <input type="search" class="form-control" placeholder="Search" id="search-query-8">
              <span class="input-group-btn">
	          	  <button type="submit" class="btn"><span class="fui-search"></span></button>
          	  </span>
            </div>
          </div>          
        </div>
      </div><!-- /row -->
      
      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Autocomplete</h3>
        </div>
        <div class="demo-col">
          <div class="form-group">
            <input class="form-control" type="text" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]' />
          </div>
        </div>
      </div><!-- /row -->
      
      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">File Input</h3>
        </div>
        <div class="last-col">
	        <div class="demo-content">
	        
	        	<div class="form-group">
		          <div class="fileinput fileinput-new" data-provides="fileinput">
							  <span class="btn btn-primary btn-embossed btn-file">					  	
							  	<span class="fileinput-new"><span class="fui-upload"></span>&nbsp;&nbsp;Attach File</span>
							  	<span class="fileinput-exists"><span class="fui-gear"></span>&nbsp;&nbsp;Change</span>
							  	<input type="file" name="...">
							  </span>
							  <span class="fileinput-filename"></span>
							  <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
							</div>
	          </div>
	          <div class="form-group">
	            <div class="fileinput fileinput-new" data-provides="fileinput">
							  <div class="input-group">
							    <div class="form-control uneditable-input" data-trigger="fileinput">
							    	<span class="fui-clip fileinput-exists"></span>
							    	<span class="fileinput-filename"></span>
							    </div>
							    <span class="input-group-btn btn-file">					    	
							    	<span class="btn btn-default fileinput-new" data-role="select-file">Select file</span>
							    	<span class="btn btn-default fileinput-exists" data-role="change"><span class="fui-gear"></span>&nbsp;&nbsp;Change</span>
							    	<input type="file" name="...">
							    	<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput"><span class="fui-trash"></span>&nbsp;&nbsp;Remove</a>					    	
							    </span>					    
							  </div>
							</div>
	          </div>
	          
	        </div>
	        <div class="demo-col">
		        <div class="form-group">
		          <div class="fileinput fileinput-new" data-provides="fileinput">
							  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
							  <div>
							    <span class="btn btn-primary btn-embossed btn-file">
							    	<span class="fileinput-new"><span class="fui-image"></span>&nbsp;&nbsp;Select image</span>
							    	<span class="fileinput-exists"><span class="fui-gear"></span>&nbsp;&nbsp;Change</span>
							    	<input type="file" name="...">
							    </span>
							    <a href="#" class="btn btn-primary btn-embossed fileinput-exists" data-dismiss="fileinput"><span class="fui-trash"></span>&nbsp;&nbsp;Remove</a>
							  </div>
							</div>
	          </div>
	        </div>
	        <div class="demo-col">
		        <div class="form-group">
		          <div class="fileinput fileinput-new" data-provides="fileinput">
							  <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
							    <img data-src="holder.js/100%x100%" alt="...">
							  </div>
							  <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
							  <div>
							    <span class="btn btn-primary btn-embossed btn-file">
								    <span class="fileinput-new"><span class="fui-image"></span>&nbsp;&nbsp;Select image</span>
								    <span class="fileinput-exists"><span class="fui-gear"></span>&nbsp;&nbsp;Change</span>
								    <input type="file" name="...">
							    </span>
							    <a href="#" class="btn btn-primary btn-embossed fileinput-exists" data-dismiss="fileinput"><span class="fui-trash"></span>&nbsp;&nbsp;Remove</a>
							  </div>
							</div>
	          </div>
	        </div>
        </div>        
      </div><!-- /row -->

      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Textarea</h3>
        </div>
        <div class="last-col">
          <div class="demo-col">
            <textarea class="form-control" rows="3" placeholder="Add comment..."></textarea>
          </div>
          <div class="demo-col">
            <textarea  class="form-control" rows="3">Some text inside small textarea. This is only for paddings and line-height sample.</textarea>
          </div>
          <div class="demo-content ptl">
            <textarea rows="3" placeholder="Add comment..." class="form-control"></textarea>
          </div>
        </div><!-- /demo-content -->
      </div><!-- /row -->

      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Tags</h3>
        </div>
        <div class="demo-content">
          <input name="tagsinput" class="tagsinput tagsinput-primary" value="Clean,Fresh,Modern,Unique" />
          <input name="tagsinput" class="tagsinput" value="School,Teacher,Colleague" />
        </div> <!-- /tags -->
      </div><!-- /row -->

      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Labels</h3>
        </div>
        <div class="demo-content">
          <div class="demo-inline demo-labels">
						<span class="label label-default">Default</span>
						<span class="label label-primary">Primary</span>
						<span class="label label-important">Important</span>
						<span class="visible-md">
							<span class="label label-success">Success</span>
							<span class="label label-warning">Warning</span>
							<span class="label label-info">Info</span>
							<span class="label label-inverse">Inverse</span>
						</span>       
          </div>
        </div>
      </div> <!-- /row -->

      <div class="demo-row">
        <h3 class="demo-title">Checkboxes &<br /> Radio-buttons</h3>
        <div class="demo-col">
          <label class="checkbox" for="checkbox1">
            <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox">
            Unchecked
          </label>
          <label class="checkbox" for="checkbox2">
            <input type="checkbox" checked="checked" value="" id="checkbox2" data-toggle="checkbox" checked="">
            Checked
          </label>
          <label class="checkbox" for="checkbox3">
            <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" disabled="">
            Disabled unchecked
          </label>
          <label class="checkbox" for="checkbox4">
            <input type="checkbox" checked="checked" value="" id="checkbox4" data-toggle="checkbox" disabled="" checked="">
            Disabled checked
          </label>
        </div><!-- /.demo-col -->
        <div class="demo-col">
          <label class="radio">
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
            Radio is off
          </label>
          <label class="radio">
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option1" data-toggle="radio" checked="">
            Radio is on
          </label>

          <label class="radio">
            <input type="radio" name="optionsRadiosDisabled" id="optionsRadios3" value="option2" data-toggle="radio" disabled="">
            Disabled radio is off
          </label>
          <label class="radio">
            <input type="radio" name="optionsRadiosDisabled" id="optionsRadios4" value="option2" data-toggle="radio" checked="" disabled="">
            Disabled radio is on
          </label>
        </div><!-- /.demo-col -->
      </div><!-- /demo-row -->

      <div class="demo-row">
        <h3 class="demo-title">Custom color</h3>
        <div class="demo-col">
          <label class="checkbox primary" for="checkbox5">
            <input type="checkbox" value="" id="checkbox5" data-toggle="checkbox">
            Unchecked
          </label>
          <label class="checkbox primary" for="checkbox6">
            <input type="checkbox" checked="checked" value="" id="checkbox6" data-toggle="checkbox" checked="">
            Checked
          </label>
          <label class="checkbox primary" for="checkbox7">
            <input type="checkbox" value="" id="checkbox7" data-toggle="checkbox" disabled="">
            Disabled unchecked
          </label>
          <label class="checkbox primary" for="checkbox8">
            <input type="checkbox" checked="checked" value="" id="checkbox8" data-toggle="checkbox" disabled="" checked="">
            Disabled checked
          </label>
        </div><!-- /.demo-col -->
        <div class="demo-col">
          <label class="radio primary">
            <input type="radio" name="optionsRadios2" id="optionsRadios5" value="option1" data-toggle="radio">
            Radio is off
          </label>
          <label class="radio primary">
            <input type="radio" name="optionsRadios2" id="optionsRadios6" value="option1" data-toggle="radio" checked="">
            Radio is on
          </label>

          <label class="radio primary">
            <input type="radio" name="optionsRadiosDisabled2" id="optionsRadios7" value="option2" data-toggle="radio" disabled="">
            Disabled radio is off
          </label>
          <label class="radio primary">
            <input type="radio" name="optionsRadiosDisabled2" id="optionsRadios" value="option2" data-toggle="radio" checked="" disabled="">
            Disabled radio is on
          </label>
        </div><!-- /.demo-col -->
      </div><!-- /demo-row -->

      <div class="demo-row">
        <h3 class="demo-title">Switches</h3>
        <div class="last-col">
          <div class="demo-col">
            <input type="checkbox" checked data-toggle="switch" />
          </div><!-- /.demo-col -->

          <div class="demo-col">
            <input type="checkbox" data-toggle="switch" />
          </div><!-- /.demo-col -->

          <div class="demo-col ptl">
            <div class="switch switch-square" data-on-label="<i class='fui-check'></i>" data-off-label="<i class='fui-cross'></i>">
              <input type="checkbox" />
            </div>
          </div><!-- /.demo-col -->

          <div class="demo-col ptl">
            <div class="switch switch-square" data-on-label="<i class='fui-check'></i>" data-off-label="<i class='fui-cross'></i>">
              <input type="checkbox" checked />
            </div>
          </div><!-- /.demo-col -->

          <div class="demo-col ptl">
            <input type="checkbox" disabled data-toggle="switch" />
          </div><!-- /.demo-col -->

          <div class="demo-col ptl">
            <input type="checkbox" checked disabled data-toggle="switch" />
          </div><!-- /.demo-col -->
        </div><!-- /.demo-row -->
      </div>

      <div class="demo-row demo-navigation">
        <div class="demo-title">
          <h3 class="demo-panel-title">Navigation</h3>
        </div>
        <div class="demo-content">
          <div class="clearfix">
            <div class="pull-left mrl">
              <ul class="pager">
                <li class="previous">
                  <a href="#fakelink">
                    <span class="fui-arrow-left"></span>
                    <span>All messages</span>
                  </a>
                </li>
                <li class="next">
                  <a href="#fakelink">
                    <span class="fui-arrow-right"></span>
                  </a>
                </li>
              </ul> <!-- /pager -->
            </div>

            <div class="pull-left mll pvl">
              <div class="btn-toolbar">
                <div class="btn-group">
                  <a class="btn btn-primary" href="#fakelink"><span class="fui-list-columned"></span></a>
                  <a class="btn btn-primary" href="#fakelink"><span class="fui-list-numbered"></span></a>
                  <a class="btn btn-primary active" href="#fakelink"><span class="fui-list-thumbnailed"></span></a>
                  <a class="btn btn-primary" href="#fakelink"><span class="fui-list-small-thumbnails"></span></a>
                </div>
              </div> <!-- /toolbar -->
            </div>
          </div>

          <div class="mbl pbm">
            <ul class="nav nav-pills">
              <li class="active"><a href="#fakelink">Popular</a></li>
              <li><a href="#fakelink">Newest</a></li>
              <li><a href="#fakelink">Bestselling</a></li>
            </ul>
          </div>

          <div class="mbl">
            <div class="pagination">
              <ul>
                <li class="previous"><a href="#fakelink" class="fui-arrow-left"></a></li>
                <li class="active"><a href="#fakelink">1</a></li>
                <li><a href="#fakelink">2</a></li>
                <li><a href="#fakelink">3</a></li>
                <li><a href="#fakelink">4</a></li>
                <li><a href="#fakelink">5</a></li>
                <li><a href="#fakelink">6</a></li>
                <li><a href="#fakelink">7</a></li>
                <li><a href="#fakelink">8</a></li>
                <li><a href="#fakelink">9</a></li>
                <li><a href="#fakelink">10</a></li>
                <li class="pagination-dropdown dropup">
                  <span class="dropdown-arrow"></span>
                  <a href="#fakelink" class="dropdown-toggle" data-toggle="dropdown">
                    <span class="fui-triangle-up"></span>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="#fakelink">10&ndash;20</a></li>
                    <li><a href="#fakelink">20&ndash;30</a></li>
                    <li><a href="#fakelink">40&ndash;50</a></li>
                  </ul>
                </li>
                <li class="next"><a href="#fakelink" class="fui-arrow-right"></a></li>
              </ul>
            </div> <!-- /pagination -->
            <div class="pagination pagination-minimal">
              <ul>
                <li class="previous"><a href="#fakelink" class="fui-arrow-left"></a></li>
                <li class="active"><a href="#fakelink">1</a></li>
                <li><a href="#fakelink">2</a></li>
                <li><a href="#fakelink">3</a></li>
                <li><a href="#fakelink">4</a></li>
                <li><a href="#fakelink">5</a></li>
                <li><a href="#fakelink">6</a></li>
                <li><a href="#fakelink">7</a></li>
                <li><a href="#fakelink">8</a></li>
                <li><a href="#fakelink">9</a></li>
                <li><a href="#fakelink">10</a></li>
                <li><a href="#fakelink">11</a></li>
                <li><a href="#fakelink">12</a></li>
                <li class="next"><a href="#fakelink" class="fui-arrow-right"></a></li>
              </ul>
            </div><!-- /pagination -->
          </div>

          <div class="mbl">
            <ul class="pagination-plain">
              <li class="previous"><a href="#fakelink">&larr; Previous</a></li>
              <li><a href="#fakelink">1</a></li>
              <li><a href="#fakelink">2</a></li>
              <li><a href="#fakelink">3</a></li>
              <li><a href="#fakelink">4</a></li>
              <li class="active"><a href="#fakelink">5</a></li>
              <li><a href="#fakelink">6</a></li>
              <li><a href="#fakelink">7</a></li>
              <li><a href="#fakelink">8</a></li>
              <li><a href="#fakelink">9</a></li>
              <li><a href="#fakelink">10</a></li>
              <li class="next"><a href="#fakelink">Newer &rarr;</a></li>
            </ul>
          </div>
          
					<div class="pagination pagination-danger">
						<a href="#fakelink" class="btn btn-danger previous">
							<span class="fui-arrow-left"></span>
							OLDER
						</a>
						<ul>
							<li><a href="#fakelink">1</a></li>
							<li><a href="#fakelink">2</a></li>
							<li><a href="#fakelink">3</a></li>
							<li><a href="#fakelink">4</a></li>
							<li><a href="#fakelink">5</a></li>
						</ul>
						<a href="#fakelink" class="btn btn-danger next">
							NEWER
							<span class="fui-arrow-right"></span>
						</a>
					</div><!-- /pagination -->          

					<div class="pagination pagination-success">
						<a href="#fakelink" class="btn btn-success previous">
							<span class="fui-arrow-left"></span>
							OLDER
						</a>
						<ul>
							<li><a href="#fakelink">1</a></li>
							<li><a href="#fakelink">2</a></li>
							<li><a href="#fakelink">3</a></li>
							<li><a href="#fakelink">4</a></li>
							<li><a href="#fakelink">5</a></li>
						</ul>
						<a href="#fakelink" class="btn btn-success next">
							NEWER
							<span class="fui-arrow-right"></span>
						</a>
					</div><!-- /pagination -->          

					<div class="pagination pagination-warning">
						<a href="#fakelink" class="btn btn-warning previous">
							<span class="fui-arrow-left"></span>
							OLDER
						</a>
						<ul>
							<li><a href="#fakelink">1</a></li>
							<li><a href="#fakelink">2</a></li>
							<li><a href="#fakelink">3</a></li>
							<li><a href="#fakelink">4</a></li>
							<li><a href="#fakelink">5</a></li>
						</ul>
						<a href="#fakelink" class="btn btn-warning next">
							NEWER
							<span class="fui-arrow-right"></span>
						</a>
					</div><!-- /pagination -->

					<div class="pagination pagination-info">
						<a href="#fakelink" class="btn btn-info previous">
							<span class="fui-arrow-left"></span>
							OLDER
						</a>
						<ul>
							<li><a href="#fakelink">1</a></li>
							<li><a href="#fakelink">2</a></li>
							<li><a href="#fakelink">3</a></li>
							<li><a href="#fakelink">4</a></li>
							<li><a href="#fakelink">5</a></li>
						</ul>
						<a href="#fakelink" class="btn btn-info next">
							NEWER
							<span class="fui-arrow-right"></span>
						</a>
					</div><!-- /pagination -->

          <div class="pagination pagination-inverse">
            <a href="#fakelink" class="btn btn-inverse previous">
              <span class="fui-arrow-left"></span>
              OLDER
            </a>
            <ul>
              <li><a href="#fakelink">1</a></li>
              <li><a href="#fakelink">2</a></li>
              <li><a href="#fakelink">3</a></li>
              <li><a href="#fakelink">4</a></li>
              <li><a href="#fakelink">5</a></li>
            </ul>
            <a href="#fakelink" class="btn btn-inverse next">
              NEWER
              <span class="fui-arrow-right"></span>
            </a>
          </div> <!-- /pagination -->
        </div>
      </div>

      <div class="demo-row demo-tabs">
        <div class="demo-title">
          <h3 class="demo-panel-title">Tabs</h3>
        </div>
        <div class="demo-content">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#">Popular</a></li>
            <li><a href="#">Newest</a></li>
            <li><a href="#">Bestselling</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                Dropdown
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#tab2">Newest</a></li>
                <li><a href="#tab3">Bestselling</a></li>
              </ul>
            </li>
          </ul> <!-- /tabs -->

          <ul class="nav nav-tabs nav-append-content">
            <li class="active"><a href="#tab1">Popular</a></li>
            <li><a href="#tab2">Newest</a></li>
            <li><a href="#tab3">Bestselling</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                Dropdown
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#tab2">Newest</a></li>
                <li><a href="#tab3">Bestselling</a></li>
              </ul>
            </li>
          </ul> <!-- /tabs -->

          <div class="tab-content">
            <div class="tab-pane active" id="tab1">
              <p>I'm in Section 1.</p>
            </div>

            <!-- /tabs -->
            <div class="tab-pane" id="tab2">
              <p>Howdy, I'm in Section 2.</p>
            </div>

            <!-- /tabs -->
            <div class="tab-pane" id="tab3">
              <p>Howdy, I'm in Section 3.</p>
            </div>
          </div> <!-- /tab-content -->

        </div>
      </div> <!-- /row -->

      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Icon Bars</h3>
        </div>
        <div class="demo-content">
          <div class="iconbar">
            <ul>
              <li class="active"><a href="#fakelink" class="fui-user"></a></li>
              <li><a href="#fakelink" class="fui-calendar"></a></li>
              <li><a href="#fakelink" class="fui-chat"></a></li>
              <li><a href="#fakelink" class="fui-mail"></a></li>
              <li>
                <a href="#fakelink" class="fui-gear">
                  <span class="iconbar-unread">1</span>
                </a>
              </li>
            </ul>
          </div> <!-- /iconbar -->

          <div class="iconbar iconbar-success">
            <ul>
              <li><a href="#fakelink" class="fui-user"></a></li>
              <li class="active"><a href="#fakelink" class="fui-calendar"></a></li>
              <li><a href="#fakelink" class="fui-chat"></a></li>
              <li><a href="#fakelink" class="fui-mail"></a></li>
              <li>
                <a href="#fakelink" class="fui-gear">
                  <span class="iconbar-unread">1</span>
                </a>
              </li>
            </ul>
          </div> <!-- /iconbar -->

          <div class="iconbar iconbar-danger">
            <ul>
              <li><a href="#fakelink" class="fui-user"></a></li>
              <li><a href="#fakelink" class="fui-calendar"></a></li>
              <li class="active"><a href="#fakelink" class="fui-chat"></a></li>
              <li><a href="#fakelink" class="fui-mail"></a></li>
              <li>
                <a href="#fakelink" class="fui-gear">
                  <span class="iconbar-unread">1</span>
                </a>
              </li>
            </ul>
          </div> <!-- /iconbar -->

          <div class="iconbar iconbar-warning">
            <ul>
              <li><a href="#fakelink" class="fui-user"></a></li>
              <li><a href="#fakelink" class="fui-calendar"></a></li>
              <li><a href="#fakelink" class="fui-chat"></a></li>
              <li class="active"><a href="#fakelink" class="fui-mail"></a></li>
              <li>
                <a href="#fakelink" class="fui-gear">
                  <span class="iconbar-unread">1</span>
                </a>
              </li>
            </ul>
          </div> <!-- /iconbar -->

          <div class="iconbar iconbar-info">
            <ul>
              <li><a href="#fakelink" class="fui-user"></a></li>
              <li><a href="#fakelink" class="fui-calendar"></a></li>
              <li><a href="#fakelink" class="fui-chat"></a></li>
              <li><a href="#fakelink" class="fui-mail"></a></li>
              <li class="active">
                <a href="#fakelink" class="fui-gear">
                  <span class="iconbar-unread">1</span>
                </a>
              </li>
            </ul>
          </div> <!-- /iconbar -->

          <div class="iconbar iconbar-horizontal">
            <ul>
              <li class="active"><a href="#fakelink" class="fui-user"></a></li>
              <li><a href="#fakelink" class="fui-calendar"></a></li>
              <li><a href="#fakelink" class="fui-chat"></a></li>
              <li><a href="#fakelink" class="fui-mail"></a></li>
              <li>
                <a href="#fakelink" class="fui-gear">
                  <span class="iconbar-unread">1</span>
                </a>
              </li>
            </ul>
          </div> <!-- /iconbar -->

          <div class="iconbar iconbar-horizontal iconbar-success">
            <ul>
              <li><a href="#fakelink" class="fui-user"></a></li>
              <li class="active"><a href="#fakelink" class="fui-calendar"></a></li>
              <li><a href="#fakelink" class="fui-chat"></a></li>
              <li><a href="#fakelink" class="fui-mail"></a></li>
              <li>
                <a href="#fakelink" class="fui-gear">
                  <span class="iconbar-unread">1</span>
                </a>
              </li>
            </ul>
          </div> <!-- /iconbar -->

          <div class="iconbar iconbar-horizontal iconbar-danger">
            <ul>
              <li><a href="#fakelink" class="fui-user"></a></li>
              <li><a href="#fakelink" class="fui-calendar"></a></li>
              <li class="active"><a href="#fakelink" class="fui-chat"></a></li>
              <li><a href="#fakelink" class="fui-mail"></a></li>
              <li>
                <a href="#fakelink" class="fui-gear">
                  <span class="iconbar-unread">1</span>
                </a>
              </li>
            </ul>
          </div> <!-- /iconbar -->

          <div class="iconbar iconbar-horizontal iconbar-warning">
            <ul>
              <li><a href="#fakelink" class="fui-user"></a></li>
              <li><a href="#fakelink" class="fui-calendar"></a></li>
              <li><a href="#fakelink" class="fui-chat"></a></li>
              <li class="active"><a href="#fakelink" class="fui-mail"></a></li>
              <li>
                <a href="#fakelink" class="fui-gear">
                  <span class="iconbar-unread">1</span>
                </a>
              </li>
            </ul>
          </div> <!-- /iconbar -->

          <div class="iconbar iconbar-horizontal iconbar-info">
            <ul>
              <li><a href="#fakelink" class="fui-user"></a></li>
              <li><a href="#fakelink" class="fui-calendar"></a></li>
              <li><a href="#fakelink" class="fui-chat"></a></li>
              <li><a href="#fakelink" class="fui-mail"></a></li>
              <li class="active">
                <a href="#fakelink" class="fui-gear">
                  <span class="iconbar-unread">1</span>
                </a>
              </li>
            </ul>
          </div> <!-- /iconbar -->
        </div>
      </div> <!-- /row -->

      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Breadcrumbs</h3>
        </div>
        <div class="demo-content">
          <ul class="breadcrumb">
            <li><a href="#fakelink">Home</a></li>
            <li><a href="#fakelink">Directory</a></li>
            <li class="active"><a href="#">Current Article</a></li>
          </ul>

          <div class="breadcrumb-text">
            <h4 class="caption">Shop</h4>
            <p>
              <a href="#fakelink" class="text-primary">House</a>
              <a href="#fakelink" class="text-info">Bedroom</a>
              <a href="#fakelink" class="text-warning">Bed</a>
              <a href="#fakelink" class="text-danger">Decor</a>
              A-Z
            </p>
          </div>
        </div>
      </div> <!-- /row -->

      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Progress bars &amp; Sliders</h3>
        </div>
        <div class="demo-content">
          <div class="progress">
            <div class="progress-bar" style="width: 45%;"></div>
          </div>
          <br/>
          <div class="progress">
            <div class="progress-bar" style="width: 40%;"></div>
            <div class="progress-bar progress-bar-warning" style="width: 10%;"></div>
            <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
            <div class="progress-bar progress-bar-success" style="width: 10%;"></div>
            <div class="progress-bar progress-bar-info" style="width: 10%;"></div>
          </div>
          <br/>
          <div id="slider" class="ui-slider"></div>
          <br/>
          <div id="slider2" class="ui-slider"></div>
          <div id="slider3" class="ui-slider">
            <span class="ui-slider-value first">$500</span>
            <span class="ui-slider-value last">$1000</span>
          </div>
        </div>
      </div> <!-- /sliders -->

      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Tooltips &amp; Popovers</h3>
        </div>
        <div class="demo-col">
          <div class="demo-tooltips">
            <p data-toggle="tooltip" data-placement="bottom" data-tooltip-style="light" title="Hello. I’m the Tooltip."></p>
          </div>
          <div class="demo-popovers">
            <div class="popover right">
              <div class="arrow"></div>
              <h3 class="popover-title">Smooth Title</h3>
              <div class="popover-content">
                <p>And here's some amazing content. It's very engaging. <br/>Right?</p>
              </div>
            </div>
          </div>
        </div>

        <div class="demo-col">
          <div class="demo-tooltips">
            <p data-toggle="tooltip" title="Here is a sample of a long dark tooltip. Hell yeah."></p>
          </div>
          <div class="demo-popovers">
            <div class="popover left">
              <div class="arrow"></div>
              <h3 class="popover-title">Smooth Title</h3>
              <div class="popover-content">
                <p>And here's some amazing content. It's very engaging. <br/>Right?</p>
              </div>
            </div>
          </div>
        </div> <!-- /tooltips -->
      </div>

      <div class="demo-row demo-social-buttons">
        <h3 class="demo-title">Social Buttons</h3>
        <div class="demo-col">
          <a href="#fakelink" class="btn btn-default btn-sm btn-social-googleplus">
            <span class="fui-googleplus"></span>
            Connect with Google
          </a>
          <a href="#fakelink" class="btn btn-default btn-sm btn-social-facebook">
            <span class="fui-facebook"></span>
            Connect with Facebook
          </a>
          <a href="#fakelink" class="btn btn-default btn-sm btn-social-twitter">
            <span class="fui-twitter"></span>
            Connect with Twitter
          </a>
        </div>

        <div class="demo-col">
          <a href="#fakelink" class="btn btn-default btn-sm btn-social-pinterest">
            <span class="fui-pinterest"></span>
            Pin It
            <span class="btn-tip">100</span>
          </a>
          <a href="#fakelink" class="btn btn-default btn-sm btn-social-linkedin">
            <span class="fui-linkedin"></span>
            Share
            <span class="btn-tip">91</span>
          </a>
          <a href="#fakelink" class="btn btn-default btn-sm btn-social-stumbleupon">
            <span class="fui-stumbleupon"></span>
            Stumble
            <span class="btn-tip">45</span>
          </a>
        </div>
      </div> <!-- /row -->

      <div class="demo-row">
        <h3 class="demo-title">Nav Lists</h3>
        <div class="demo-col">
          <ul class="nav nav-list">
            <li class="nav-header">Subjects</li>
            <li>
              <a href="#fakelink">
                UX Design
                <span class="badge pull-right">19</span>
              </a>
            </li>
            <li class="active">
              <a href="#fakelink">
                Photography
                <span class="badge pull-right">130</span>
              </a>
            </li>
            <li>
              <a href="#fakelink">
                Art
                <span class="badge pull-right">9</span>
              </a>
            </li>
            <li class="divider"></li>
            <li class="nav-header">Condition</li>
            <li>
              <a href="#fakelink">
                Brand new
                <span class="badge pull-right">69</span>
              </a>
            </li>
            <li>
              <a href="#fakelink">
                Read-used
                <span class="badge pull-right">21</span>
              </a>
            </li>
            <li>
              <a href="#fakelink">
                Work-used
                <span class="badge pull-right">40</span>
              </a>
            </li>
          </ul>
        </div> <!-- /nav-list -->

        <div class="demo-col">
          <ul class="nav nav-list nav-list-vivid">
            <li class="nav-header">Europe</li>
            <li>
              <a href="#fakelink">
                London, United Kingdom
                <span class="badge pull-right">19</span>
              </a>
            </li>
            <li class="active">
              <a href="#fakelink">
                Berlin, Germany
                <span class="badge pull-right">130</span>
              </a>
            </li>
            <li>
              <a href="#fakelink">
                Madrid, Spain
                <span class="badge pull-right">9</span>
              </a>
            </li>
            <li class="divider"></li>
            <li class="nav-header">Asia</li>
            <li>
              <a href="#fakelink">
                Shanghai, China
                <span class="badge pull-right">69</span>
              </a>
            </li>
            <li>
              <a href="#fakelink">
                Bombay, India
                <span class="badge pull-right">21</span>
              </a>
            </li>
            <li>
              <a href="#fakelink">
                Karachi, Pakistan
                <span class="badge pull-right">40</span>
              </a>
            </li>
          </ul>
        </div> <!-- /nav-list -->
      </div> <!-- /row -->

      <div class="demo-row">
        <h3 class="demo-title">Alerts</h3>
        <div class="demo-content">
          <!-- Alert Info -->
          <div class="alert alert-info">
            <button type="button" class="close fui-cross" data-dismiss="alert"></button>
            Your computer restarted <a href="#fakelink">because of a problem</a>. Sorry for any inconvenience and appreciate your patient.
          </div>

          <div class="alert alert-info">
            <button type="button" class="close fui-cross" data-dismiss="alert"></button>
            <h4>Information Lable</h4>
            <p>An error message is information displayed when an <a href="#fakelink">unexpected condition occurs</a>, usually on a computer or other device. On modern operating systems with graphical user interfaces, error messages are often displayed using dialog boxes.</p>
            <a href="#fakelink" class="btn btn-info btn-wide">Turn it off now</a>
            <a href="#fakelink" class="btn btn-default btn-wide">It’s ok</a>
          </div>

          <!-- Alert Error -->
          <div class="alert alert-error">
            <button type="button" class="close fui-cross" data-dismiss="alert"></button>
            Your computer restarted <a href="#fakelink">because of a problem</a>. Sorry for any inconvenience and appreciate your patient.
          </div>

          <div class="alert alert-error">
            <button type="button" class="close fui-cross" data-dismiss="alert"></button>
            <h4>Error: The change you wanted was rejected.</h4>
            <p>An error message is information displayed when an <a href="#fakelink">unexpected condition occurs</a>, usually on a computer or other device. On modern operating systems with graphical user interfaces, error messages are often displayed using dialog boxes.</p>
            <a href="#fakelink" class="btn btn-danger btn-wide">Turn it off now</a>
            <a href="#fakelink" class="btn btn-default btn-wide">It’s ok</a>
          </div>

          <!-- Alert Success -->
          <div class="alert alert-success">
            <button type="button" class="close fui-cross" data-dismiss="alert"></button>
            Your computer restarted <a href="#fakelink">because of a problem</a>. Sorry for any inconvenience and appreciate your patient.
          </div>

          <div class="alert alert-success">
            <button type="button" class="close fui-cross" data-dismiss="alert"></button>
            <h4>Disc Space was extended twice. It’s ok?</h4>
            <p>An error message is information displayed when an <a href="#fakelink">unexpected condition occurs</a>, usually on a computer or other device. On modern operating systems with graphical user interfaces, error messages are often displayed using dialog boxes.</p>
            <a href="#fakelink" class="btn btn-primary btn-wide"><span class="fui-check-inverted"></span>&nbsp;&nbsp;Hurray!</a>
            <a href="#fakelink" class="btn btn-default btn-info btn-wide">Share on twitter</a>
          </div>

          <!-- Alert Default -->
          <div class="alert">
            <button type="button" class="close fui-cross" data-dismiss="alert"></button>
            Your computer restarted <a href="#fakelink">because of a problem</a>. Sorry for any inconvenience and appreciate your patient.
          </div>

          <div class="alert">
            <button type="button" class="close fui-cross" data-dismiss="alert"></button>
            <h4>Hey, Some problems on our servers.</h4>
            <p>An error message is information displayed when an <a href="#fakelink">unexpected condition occurs</a>, usually on a computer or other device. On modern operating systems with graphical user interfaces, error messages are often displayed using dialog boxes.</p>
            <a href="#fakelink" class="btn btn-warning btn-wide">Fix it</a>
            <a href="#fakelink" class="btn btn-default btn-wide">Okey, no probs!</a>
          </div>
        </div> <!-- /demo-content -->
      </div> <!-- /row -->
    </div> <!-- /.container -->
    
    <div class="container">
      <div class="demo-row">
        <h3 class="demo-title">Modals</h3>
      </div>
    </div><!-- /.container -->
    
    <div class="static-modal-backdrop">
      <div class="modal">
        <div class="modal-dialog">
        	<div class="modal-content">
        		<div class="modal-header">
							<button type="button" class="close fui-cross" data-dismiss="modal" aria-hidden="true"></button>
							<h4 class="modal-title">Modal header</h4>
						</div>
						<div class="modal-body">
							<p>An error message is information displayed when an <a href="#">unexpected condition occurs</a>, usually on a computer or other device. </p>
						</div>
						<div class="modal-footer">
							<a href="#" class="btn btn-default btn-wide">It’s ok</a>
							<a href="#" class="btn btn-wide btn-primary">Turn it off now.</a>
						</div>
        	</div>
        </div>        
      </div>
    </div><!-- /.static-modal-backdrop -->
    
    <div class="container">
      <div class="demo-row">
        <h3 class="demo-title">Glyphs <small>(52)</small></h3>
        <div class="demo-content demo-icons">
          <span class="fui-info"></span>
          <span class="fui-alert"></span>
          <span class="fui-question"></span>
          <span class="fui-window"></span>
          <span class="fui-windows"></span>
          <span class="fui-upload"></span>
          <span class="fui-arrow-right"></span>
          <span class="fui-arrow-left"></span>
          <span class="fui-loop"></span>
          <span class="fui-cmd"></span>
          <span class="fui-mic"></span>
          <span class="fui-export"></span>
          <span class="fui-check-inverted"></span>
          <span class="fui-heart"></span>
          <span class="fui-location"></span>
          <span class="fui-plus"></span>
          <span class="fui-check"></span>
          <span class="fui-cross"></span>
          <span class="fui-list"></span>
          <span class="fui-new"></span>
          <span class="fui-video"></span>
          <span class="fui-photo"></span>
          <span class="fui-volume"></span>
          <span class="fui-time"></span>
          <span class="fui-eye"></span>
          <span class="fui-chat"></span>
          <span class="fui-home"></span>
          <span class="fui-search"></span>
          <span class="fui-user"></span>
          <span class="fui-mail"></span>
          <span class="fui-lock"></span>
          <span class="fui-power"></span>
          <span class="fui-star"></span>
          <span class="fui-calendar"></span>
          <span class="fui-gear"></span>
          <span class="fui-book"></span>
          <span class="fui-exit"></span>
          <span class="fui-trash"></span>
          <span class="fui-folder"></span>
          <span class="fui-bubble"></span>
          <span class="fui-cross-inverted"></span>
          <span class="fui-plus-inverted"></span>
          <span class="fui-calendar-solid"></span>
          <span class="fui-star-2"></span>
          <span class="fui-credit-card"></span>
          <span class="fui-clip"></span>
          <span class="fui-link"></span>
          <span class="fui-pause"></span>
          <span class="fui-play"></span>
          <span class="fui-tag"></span>
          <span class="fui-document"></span>
          <span class="fui-image"></span>
        </div> <!-- /icon font row -->
      </div> <!-- /icons -->

      <div class="demo-row">
        <h3 class="demo-title">Additional <small>(16)</small></h3>
        <div class="demo-content demo-icons">
          <span class="fui-triangle-up"></span>
          <span class="fui-triangle-up-small"></span>
          <span class="fui-triangle-right-large"></span>
          <span class="fui-triangle-left-large"></span>
          <span class="fui-triangle-down"></span>
          <span class="fui-triangle-down-small"></span>
          <span class="fui-radio-unchecked"></span>
          <span class="fui-radio-checked"></span>
          <span class="fui-checkbox-unchecked"></span>
          <span class="fui-checkbox-checked"></span>
          <span class="fui-list-thumbnailed"></span>
          <span class="fui-list-small-thumbnails"></span>
          <span class="fui-list-numbered"></span>
          <span class="fui-list-large-thumbnails"></span>
          <span class="fui-list-columned"></span>
          <span class="fui-list-bulleted"></span>
        </div>
      </div> <!-- /demo-row -->

      <div class="demo-row">
        <h3 class="demo-title">Social <small>(16)</small></h3>
        <div class="demo-content demo-icons">
          <span class="fui-facebook"></span>
          <span class="fui-youtube"></span>
          <span class="fui-vimeo"></span>
          <span class="fui-twitter"></span>
          <span class="fui-stumbleupon"></span>
          <span class="fui-spotify"></span>
          <span class="fui-skype"></span>
          <span class="fui-pinterest"></span>
          <span class="fui-path"></span>
          <span class="fui-myspace"></span>
          <span class="fui-linkedin"></span>
          <span class="fui-googleplus"></span>
          <span class="fui-dribbble"></span>
          <span class="fui-blogger"></span>
          <span class="fui-behance"></span>
          <span class="fui-flat"></span>
        </div>
      </div> <!-- /demo-row -->

      <div class="demo-row">
        <div class="demo-title pbm">
	        <h3 class="demo-panel-title">Tables</h3>
        </div>
        <div class="demo-content-wide ptl">
        	<div class="table-responsive">
	        	<table class="table table-striped">
	            <tr>
	              <th>Rank</th>
	              <th>Name</th>
	              <th>Year</th>
	              <th>Rating</th>
	              <th>Votes</th>
	              <th>&nbsp;</th>
	            </tr>
	            <tr>
	              <td>1</td>
	              <td>The Shawshank Redemption</td>
	              <td>1994</td>
	              <td>9.2</td>
	              <td>923,629</td>
	              <td><span class="fui-check-inverted text-primary"></span></td>
	            </tr>
	            <tr>
	              <td>2</td>
	              <td>The Godfather</td>
	              <td>1972</td>
	              <td>9.2</td>
	              <td>663,133</td>
	              <td><span class="fui-cross-inverted text-primary"></span></td>
	            </tr>
	            <tr>
	              <td>3</td>
	              <td>The Godfather: Part II</td>
	              <td>1974</td>
	              <td>9.0</td>
	              <td>427,132</td>
	              <td><span class="fui-cross-inverted text-primary"></span></td>
	            </tr>
	            <tr>
	              <td>4</td>
	              <td>Pulp Fiction</td>
	              <td>1994</td>
	              <td>8.9</td>
	              <td>719,280</td>
	              <td><span class="fui-check-inverted text-primary"></span></td>
	            </tr>
	            <tr>
	              <td>5</td>
	              <td>The Good, the Bad and the Ugly</td>
	              <td>1966</td>
	              <td>8.9</td>
	              <td>218,887</td>
	              <td><span class="fui-check-inverted text-primary"></span></td>
	            </tr>
	          </table>
        	</div>          
        </div>
      </div>

      <div class="demo-row">
        <div class="demo-content-wide">
        	<div class="table-responsive">
	        	<table class="table table-striped table-hover">
	            <thead>
	              <tr>
	                <th>Rank</th>
	                <th>Name</th>
	                <th>Year</th>
	                <th>Rating</th>
	                <th>Votes</th>
	              </tr>
	            </thead>
	            <tbody>
	              <tr>
	                <td>1</td>
	                <td>The Shawshank Redemption</td>
	                <td>1994</td>
	                <td>9.2</td>
	                <td>923,629</td>
	              </tr>
	              <tr>
	                <td>2</td>
	                <td>The Godfather</td>
	                <td>1972</td>
	                <td>9.2</td>
	                <td>663,133</td>
	              </tr>
	              <tr>
	                <td>3</td>
	                <td>The Godfather: Part II</td>
	                <td>1974</td>
	                <td>9.0</td>
	                <td>427,132</td>
	              </tr>
	              <tr>
	                <td>4</td>
	                <td>Pulp Fiction</td>
	                <td>1994</td>
	                <td>8.9</td>
	                <td>719,280</td>
	              </tr>
	              <tr>
	                <td>5</td>
	                <td>The Good, the Bad and the Ugly</td>
	                <td>1966</td>
	                <td>8.9</td>
	                <td>218,887</td>
	              </tr>
	            </tbody>
	          </table>
        	</div>          
        </div>
      </div>

      <div class="demo-row">
        <div class="demo-content-wide">
        	<div class="table-responsive">
	        	<table class="table table-bordered">
	            <thead>
	              <tr>
	                <th><label class="checkbox no-label toggle-all" for="checkbox-table-1"><input type="checkbox" value="" id="checkbox-table-1" data-toggle="checkbox"></label></th>
	                <th>Rank</th>
	                <th>Name</th>
	                <th>Genre</th>
	                <th>Votes</th>
	                <th>Year</th>
	                <th>Rating</th>
	              </tr>
	            </thead>
	            <tbody>
	              <tr>
	                <td><label class="checkbox no-label" for="checkbox-table-2"><input type="checkbox" value="" id="checkbox-table-2" data-toggle="checkbox"></label></td>
	                <td>1</td>
	                <td>The Shawshank Redemption</td>
	                <td>Crime, Drama</td>
	                <td>923,629</td>
	                <td>1994</td>
	                <td class="text-center">9.2</td>
	              </tr>
	              <tr class="selected-row">
	                <td><label class="checkbox no-label" for="checkbox-table-3"><input type="checkbox" checked="checked" value="" id="checkbox-table-3" data-toggle="checkbox"></label></td>
	                <td>2</td>
	                <td>The Godfather</td>
	                <td>Crime, Drama</td>
	                <td>663,133</td>
	                <td>1972</td>
	                <td class="text-center">9.2</td>
	              </tr>
	              <tr class="selected-row">
	                <td><label class="checkbox no-label" for="checkbox-table-4"><input type="checkbox" checked="checked" value="" id="checkbox-table-4" data-toggle="checkbox"></label></td>
	                <td>3</td>
	                <td>The Godfather: Part II</td>
	                <td>Crime, Drama</td>
	                <td>427,132</td>
	                <td>1974</td>
	                <td class="text-center">9.0</td>
	              </tr>
	              <tr>
	                <td><label class="checkbox no-label" for="checkbox-table-5"><input type="checkbox" value="" id="checkbox-table-5" data-toggle="checkbox"></label></td>
	                <td>4</td>
	                <td>Pulp Fiction</td>
	                <td>Crime, Drama</td>
	                <td>719,280</td>
	                <td>1994</td>
	                <td class="text-center">8.9</td>
	              </tr>
	              <tr>
	                <td><label class="checkbox no-label" for="checkbox-table-6"><input type="checkbox" value="" id="checkbox-table-6" data-toggle="checkbox"></label></td>
	                <td>5</td>
	                <td>The Good, the Bad and the Ugly</td>
	                <td>Adventure, Western</td>
	                <td>218,887</td>
	                <td>1966</td>
	                <td class="text-center">8.9</td>
	              </tr>
	            </tbody>
	          </table>
        	</div>          
        </div> <!-- /tables -->
      </div> <!-- /row -->

      <div class="demo-row pbm">
      	<div class="demo-title pbm">
      		<h3 class="demo-panel-title">Navbar</h3>
      	</div>
        <div class="demo-content-wide ptl">
        
        	<nav class="navbar navbar-default" role="navigation">
        		<div class="navbar-header">
					    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
					      <span class="sr-only">Toggle navigation</span>
					    </button>
					    <a class="navbar-brand" href="#"><span class="fui-flat"></span></a>
					  </div>
					  <div class="collapse navbar-collapse" id="navbar-collapse-01">
					    <ul class="nav navbar-nav">			      
					      <li class="active"><a href="#fakelink">Products</a></li>
					      <li><a href="#fakelink">Features</a></li>
					      <li><a href="#fakelink">Pricing</a></li>
	              <li><a href="#fakelink">About</a></li>	
					     </ul> 		      
					    <form class="navbar-form navbar-right" action="#" role="search">
		          	<div class="form-group">
		            	<div class="input-group">
										<input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
										<span class="input-group-btn">
											<button type="submit" class="btn"><span class="fui-search"></span></button>
										</span>            
									</div>
		          	</div>	             
		          </form>
					  </div><!-- /.navbar-collapse -->
        	</nav><!-- /navbar -->

					<nav class="navbar navbar-default navbar-lg" role="navigation">
					  <div class="navbar-header">
					    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-02">
					      <span class="sr-only">Toggle navigation</span>
					    </button>
					    <a class="navbar-brand" href="#"><span class="fui-flat"></span></a>
					  </div>
					
					  <div class="collapse navbar-collapse" id="#navbar-collapse-02">
					    <ul class="nav navbar-nav">			      
					      <li><a href="#">Messages<span class="navbar-unread">1</span></a></li>
					      <li class="active"><a href="#">About Us</a></li>
					      <li><a href="#">Clients</a></li>	
					     </ul> 		      
					    <ul class="nav navbar-nav navbar-right">
					    	<li class="dropdown">
					        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MonsterCritic <b class="caret"></b></a>
					        <span class="dropdown-arrow"></span>
					        <ul class="dropdown-menu">
					          <li><a href="#">Action</a></li>
					          <li><a href="#">Another action</a></li>
					          <li><a href="#">Something else here</a></li>
					          <li class="divider"></li>
					          <li><a href="#">Separated link</a></li>
					        </ul>
					      </li>
					      <li><a href="#"><span class="visible-sm visible-xs">Settings<span class="fui-gear"></span></span><span class="visible-md visible-lg"><span class="fui-gear"></span></span></a></li>
					    </ul>
					  </div><!-- /.navbar-collapse -->
					</nav><!-- /navbar -->
					
					<nav class="navbar navbar-inverse navbar-embossed" role="navigation">
        		<div class="navbar-header">
					    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
					      <span class="sr-only">Toggle navigation</span>
					    </button>
					    <a class="navbar-brand" href="#">Flat UI</a>
					  </div>
					  <div class="collapse navbar-collapse" id="navbar-collapse-01">
					    <ul class="nav navbar-nav">			      
					      <li class="active"><a href="#fakelink">Products</a></li>
					      <li><a href="#fakelink">Features</a></li>
					      <li><a href="#fakelink">Pricing</a></li>
	              <li><a href="#fakelink">About</a></li>	
					     </ul> 		      
					    <form class="navbar-form navbar-right" action="#" role="search">
		          	<div class="form-group">
		            	<div class="input-group">
										<input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
										<span class="input-group-btn">
											<button type="submit" class="btn"><span class="fui-search"></span></button>
										</span>            
									</div>
		          	</div>	             
		          </form>
					  </div><!-- /.navbar-collapse -->
        	</nav><!-- /navbar -->  
					
					<nav class="navbar navbar-inverse navbar-embossed navbar-lg" role="navigation">
					  <div class="navbar-header">
					    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-02">
					      <span class="sr-only">Toggle navigation</span>
					    </button>
					    <a class="navbar-brand" href="#">Flat UI</a>
					  </div>
					
					  <div class="collapse navbar-collapse" id="#navbar-collapse-02">
					    <ul class="nav navbar-nav">			      
					      <li><a href="#">Messages<span class="navbar-unread">1</span></a></li>
					      <li class="active"><a href="#">About Us</a></li>
					      <li><a href="#">Clients</a></li>	
					     </ul> 		      
					    <ul class="nav navbar-nav navbar-right">
					    	<li class="dropdown">
					        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MonsterCritic <b class="caret"></b></a>
					        <span class="dropdown-arrow"></span>
					        <ul class="dropdown-menu">
					          <li><a href="#">Action</a></li>
					          <li><a href="#">Another action</a></li>
					          <li><a href="#">Something else here</a></li>
					          <li class="divider"></li>
					          <li><a href="#">Separated link</a></li>
					        </ul>
					      </li>
					      <li><a href="#"><span class="visible-sm visible-xs">Settings<span class="fui-gear"></span></span><span class="visible-md visible-lg"><span class="fui-gear"></span></span></a></li>
					    </ul>
					  </div><!-- /.navbar-collapse -->
					</nav><!-- /navbar --> 
          
        </div>
      </div> <!-- /row -->
      
      <div class="demo-row pbm ptl">
		    <div class="demo-title pbm">
	    		<h3 class="demo-panel-title">Dialog</h3>
	    	</div>
	    </div><!-- /row -->	    
    </div><!-- /.container -->

    <div class="dialog dialog-success">
      Activation link was sent to <span class="text-primary">m***@gmail.com</span>
      <button class="btn btn-primary btn-wide mll">
        <span class="fui-mail"></span>
        Resend it to me!
      </button>
    </div> <!-- /dialog -->

    <div class="dialog">
      <span class="fui-mail mrm"></span>
      Thank you! Your message has been sent.
    </div> <!-- /dialog -->

    <div class="dialog demo-dialog">
      <form class="form-inline">
        <div class="form-group">
					<label class="sr-only" for="dialogExampleInputEmail1">Login/E-mail</label>
					<input type="email" class="form-control flat" id="dialogExampleInputEmail1" placeholder="Login/E-mail">
				</div>
        <div class="form-group">
					<label class="sr-only" for="dialogExampleInputPass1">Login/E-mail</label>
					<input type="password" class="form-control flat" id="dialogExampleInputPass1" placeholder="Password">
					<span class="input-icon fui-question"></span>
				</div>
        <button class="btn btn-primary btn-wide">Login</button>
        <button class="btn btn-danger btn-wide">Register</button>
      </form>
    </div> <!-- /dialog -->

    <div class="container ptl">
      <div class="demo-row menu-row">
        <h3 class="demo-title">Bottom Menu</h3>
      </div><!-- /.demo-row -->
    </div><!-- /.container -->

    <div class="mtl pbl">
      <div class="bottom-menu bottom-menu-inverse">
        <div class="container">
          <div class="row">
            <div class="col-md-2 navbar-brand">
              <a href="#fakelink" class="fui-flat"></a>
            </div>

            <div class="col-md-8">
              <ul class="bottom-links">
                <li><a href="#fakelink">About Us</a></li>
                <li><a href="#fakelink">Store</a></li>
                <li class="active"><a href="#fakelink">Jobs</a></li>
                <li><a href="#fakelink">Privacy</a></li>
                <li><a href="#fakelink">Terms</a></li>
                <li><a href="#fakelink">Follow Us</a></li>
                <li><a href="#fakelink">Support</a></li>
                <li><a href="#fakelink">Links</a></li>
              </ul>
            </div>

            <div class="col-md-2">
              <ul class="bottom-icons">
                <li><a href="#fakelink" class="fui-pinterest"></a></li>
                <li><a href="#fakelink" class="fui-facebook"></a></li>
                <li><a href="#fakelink" class="fui-twitter"></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div> <!-- /bottom-menu-inverse -->
    </div>

    <div class="bottom-menu">
      <div class="container">
        <div class="row">
          <div class="col-md-2 navbar-brand">
            <a href="#fakelink" class="fui-flat"></a>
          </div>

          <div class="col-md-8">
            <ul class="bottom-links">
              <li><a href="#fakelink">About Us</a></li>
              <li><a href="#fakelink">Store</a></li>
              <li class="active"><a href="#fakelink">Jobs</a></li>
              <li><a href="#fakelink">Privacy</a></li>
              <li><a href="#fakelink">Terms</a></li>
              <li><a href="#fakelink">Follow Us</a></li>
              <li><a href="#fakelink">Support</a></li>
              <li><a href="#fakelink">Links</a></li>
            </ul>
          </div>

          <div class="col-md-2">
            <ul class="bottom-icons">
              <li><a href="#fakelink" class="fui-pinterest"></a></li>
              <li><a href="#fakelink" class="fui-facebook"></a></li>
              <li><a href="#fakelink" class="fui-twitter"></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div> <!-- /bottom-menu -->

    <div class="mvl pvl">
      <div class="bottom-menu bottom-menu-large bottom-menu-inverse">
        <div class="container">
          <div class="row">
            <div class="col-md-2 navbar-brand">
              <a href="#fakelink" class="fui-flat"></a>
            </div>

            <div class="col-md-2">
              <h5 class="title">ABOUT US</h5>
              <ul class="bottom-links">
                <li><a href="#fakelink">Dashboard</a></li>
                <li><a href="#fakelink">Feed</a></li>
                <li><a href="#fakelink">Forums</a></li>
                <li><a href="#fakelink">Radio</a></li>
                <li><a href="#fakelink">Journal</a></li>
                <li><a href="#fakelink">Reader</a></li>
                <li><a href="#fakelink">Store</a></li>
              </ul>
            </div>

            <div class="col-md-2">
              <h5 class="title">CATEGORIES</h5>
              <ul class="bottom-links">
                <li><a href="#fakelink">Design</a></li>
                <li><a href="#fakelink">Freebies</a></li>
                <li><a href="#fakelink">Tutorials</a></li>
                <li><a href="#fakelink">Coding</a></li>
                <li><a href="#fakelink">Inspiration</a></li>
                <li><a href="#fakelink">WordPress</a></li>
                <li><a href="#fakelink">Resources</a></li>
              </ul>
            </div>

            <div class="col-md-2">
              <h5 class="title">NETWORKS</h5>
              <ul class="bottom-links">
                <li><a href="#fakelink">Insight</a></li>
                <li><a href="#fakelink">Promotion</a></li>
                <li><a href="#fakelink">Production</a></li>
                <li><a href="#fakelink">Planning</a></li>
                <li><a href="#fakelink">Journal</a></li>
                <li><a href="#fakelink">Reader</a></li>
                <li><a href="#fakelink">Store</a></li>
              </ul>
            </div>

            <div class="col-md-2">
              <h5 class="title">MAINFRAME</h5>
              <ul class="bottom-links">
                <li><a href="#fakelink">Register / Login</a></li>
                <li class="active"><a href="#fakelink">Jobs</a></li>
                <li><a href="#fakelink">Contacts</a></li>
                <li><a href="#fakelink">Privacy</a></li>
                <li><a href="#fakelink">Terms of Use</a></li>
              </ul>
            </div>

            <div class="col-md-2">
              <h5 class="title">FOLLOW US</h5>
              <ul class="bottom-links">
                <li><a href="#fakelink">Facebook</a></li>
                <li><a href="#fakelink">Twitter</a></li>
                <li><a href="#fakelink">Youtube</a></li>
                <li><a href="#fakelink">Vimeo</a></li>
                <li><a href="#fakelink">Instagram</a></li>
                <li><a href="#fakelink">Vine&nbsp;&nbsp;<span class="label label-small label-primary">New</span></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div> <!-- /bottom-menu /large /inverse -->
    </div>

    <div class="bottom-menu bottom-menu-large mbl">
      <div class="container">
        <div class="row">
          <div class="col-md-2 navbar-brand">
            <a href="#fakelink" class="fui-flat"></a>
          </div>

          <div class="col-md-2">
            <h5 class="title">ABOUT US</h5>
            <ul class="bottom-links">
              <li><a href="#fakelink">Dashboard</a></li>
              <li><a href="#fakelink">Feed</a></li>
              <li><a href="#fakelink">Forums</a></li>
              <li><a href="#fakelink">Radio</a></li>
              <li><a href="#fakelink">Journal</a></li>
              <li><a href="#fakelink">Reader</a></li>
              <li><a href="#fakelink">Store</a></li>
            </ul>
          </div>

          <div class="col-md-2">
            <h5 class="title">CATEGORIES</h5>
            <ul class="bottom-links">
              <li><a href="#fakelink">Design</a></li>
              <li><a href="#fakelink">Freebies</a></li>
              <li><a href="#fakelink">Tutorials</a></li>
              <li><a href="#fakelink">Coding</a></li>
              <li><a href="#fakelink">Inspiration</a></li>
              <li><a href="#fakelink">WordPress</a></li>
              <li><a href="#fakelink">Resources</a></li>
            </ul>
          </div>

          <div class="col-md-2">
            <h5 class="title">NETWORKS</h5>
            <ul class="bottom-links">
              <li><a href="#fakelink">Insight</a></li>
              <li><a href="#fakelink">Promotion</a></li>
              <li><a href="#fakelink">Production</a></li>
              <li><a href="#fakelink">Planning</a></li>
              <li><a href="#fakelink">Journal</a></li>
              <li><a href="#fakelink">Reader</a></li>
              <li><a href="#fakelink">Store</a></li>
            </ul>
          </div>

          <div class="col-md-2">
            <h5 class="title">MAINFRAME</h5>
            <ul class="bottom-links">
              <li><a href="#fakelink">Register / Login</a></li>
              <li class="active"><a href="#fakelink">Jobs</a></li>
              <li><a href="#fakelink">Contacts</a></li>
              <li><a href="#fakelink">Privacy</a></li>
              <li><a href="#fakelink">Terms of Use</a></li>
            </ul>
          </div>

          <div class="col-md-2">
            <h5 class="title">FOLLOW US</h5>
            <ul class="bottom-links">
              <li><a href="#fakelink">Facebook</a></li>
              <li><a href="#fakelink">Twitter</a></li>
              <li><a href="#fakelink">Youtube</a></li>
              <li><a href="#fakelink">Vimeo</a></li>
              <li><a href="#fakelink">Instagram</a></li>
              <li><a href="#fakelink">Vine&nbsp;&nbsp;<span class="label label-small label-primary">New</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div> <!-- /bottom-menu /large -->

    <div class="container ptl">
      <div class="demo-row typography-row">
      	<div class="demo-title">
      		<h3 class="demo-panel-title">Typography</h3>
      	</div>
      	<div class="demo-content">      		
      		<div class="demo-type-example">
	      		<h1><span class="demo-heading-note">Header 1</span>Showers across the</h1>
      		</div>
      		<div class="demo-type-example">
	      		<h2><span class="demo-heading-note">Header 2</span>Give this quartet a few</h2>
      		</div>
      		<div class="demo-type-example">
	      		<h3><span class="demo-heading-note">Header 3</span>The Vatican transitions to a</h3>
      		</div>
      		<div class="demo-type-example">
	      		<h4><span class="demo-heading-note">Header 4</span>Great American Bites: Telluride's Oak, The</h4>
      		</div>
      		<div class="demo-type-example">
	      		<h5><span class="demo-heading-note">Header 5</span>Author Diane Alberts loves her some good</h5>
      		</div>
      		<div class="demo-type-example">
	      		<h6><span class="demo-heading-note">Header 6</span>With the success of young-adult book-to-movie</h6>
      		</div>
      		<div class="demo-type-example">
	      		<span class="demo-text-note">Paragraph</span>
	          <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <strong>Donec ullamcorper</strong> nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      		</div>
      		<div class="demo-type-example">
	      		<span class="demo-text-note">Image</span>
	          <img src="images/exaple-image.jpg" alt="exaple-image" class="img-rounded img-responsive">
	          <p class="img-comment"><strong>Note:</strong> gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      		</div>
      		<div class="demo-type-example">
	      		<span class="demo-text-note">Lead Text</span>
						<p class="lead">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      		</div>
      		<div class="demo-type-example">
	      		<span class="demo-text-note">Quote</span>
	          <blockquote>
	            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus.</p>
	            <small>Steve Jobs, CEO Apple</small>
	          </blockquote>
      		</div>
      		<div class="demo-type-example">
	      		<span class="demo-text-note">Small Font</span>
	          <p><small>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</small></p>
      		</div>
      	</div><!-- /.demo-content-wide -->
      </div><!-- /.demo-row -->
      
      <div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Carousel</h3>
        </div>
        <div class="demo-content-wide ptl">
          <div id="myCarousel" class="carousel slide" data-interval="false">
          	<!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <img src="images/carousel/image-01.jpg" alt="" />
                <div class="carousel-caption">
                  <h3>Thumbnail label</h3>
                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec.</p>
                </div>
              </div>
              <div class="item">
                <img src="images/carousel/image-02.jpg" alt="" />
                <div class="carousel-caption">
                  <h3>Thumbnail label</h3>
                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec.</p>
                </div>
              </div>
              <div class="item">
                <img src="images/carousel/image-03.jpg" alt="" />
                <div class="carousel-caption">
                  <h3>Thumbnail label</h3>
                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec.</p>
                </div>
              </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control fui-arrow-left" href="#myCarousel" data-slide="prev"></a>
            <a class="right carousel-control fui-arrow-right" href="#myCarousel" data-slide="next"></a>
          </div>
        </div><!-- /.demo-content -->
      </div><!-- /.demo-row -->

      <div class="demo-row demo-illustrations">
        <div class="demo-title">
          <h3 class="demo-panel-title">Icons</h3>
        </div>

        <div class="demo-content-wide">
          <div><img src="images/icons/android.svg" alt="" /></div>
					<div><img src="images/icons/android1.svg" alt="" /></div>
					<div><img src="images/icons/app-store.svg" alt="" /></div>
					<div><img src="images/icons/arrow.svg" alt="" /></div>
					<div><img src="images/icons/art.svg" alt="" /></div>
					<div><img src="images/icons/bag.svg" alt="" /></div>
					<div><img src="images/icons/basket.svg" alt="" /></div>
					<div><img src="images/icons/book.svg" alt="" /></div>
					<div><img src="images/icons/bowling.svg" alt="" /></div>
					<div><img src="images/icons/box.svg" alt="" /></div>
					<div><img src="images/icons/brush.svg" alt="" /></div>
					<div><img src="images/icons/building.svg" alt="" /></div>
					<div><img src="images/icons/bulb.svg" alt="" /></div>
					<div><img src="images/icons/button.svg" alt="" /></div>
					<div><img src="images/icons/calculator.svg" alt="" /></div>
					<div><img src="images/icons/calendar.svg" alt="" /></div>
					<div><img src="images/icons/camera.svg" alt="" /></div>
					<div><img src="images/icons/car.svg" alt="" /></div>
					<div><img src="images/icons/card.svg" alt="" /></div>
					<div><img src="images/icons/chair.svg" alt="" /></div>
					<div><img src="images/icons/chat.svg" alt="" /></div>
					<div><img src="images/icons/clipboard.svg" alt="" /></div>
					<div><img src="images/icons/clocks.svg" alt="" /></div>
					<div><img src="images/icons/compas.svg" alt="" /></div>
					<div><img src="images/icons/converse.svg" alt="" /></div>
					<div><img src="images/icons/cup.svg" alt="" /></div>
					<div><img src="images/icons/dj.svg" alt="" /></div>
					<div><img src="images/icons/donut.svg" alt="" /></div>
					<div><img src="images/icons/dude.svg" alt="" /></div>
					<div><img src="images/icons/dynamite.svg" alt="" /></div>
					<div><img src="images/icons/earth.svg" alt="" /></div>
					<div><img src="images/icons/egg.svg" alt="" /></div>
					<div><img src="images/icons/eye.svg" alt="" /></div>
					<div><img src="images/icons/file.svg" alt="" /></div>
					<div><img src="images/icons/fit.svg" alt="" /></div>
					<div><img src="images/icons/flag.svg" alt="" /></div>
					<div><img src="images/icons/flask.svg" alt="" /></div>
					<div><img src="images/icons/flower.svg" alt="" /></div>
					<div><img src="images/icons/games.svg" alt="" /></div>
					<div><img src="images/icons/gift-box.svg" alt="" /></div>
					<div><img src="images/icons/girl.svg" alt="" /></div>
					<div><img src="images/icons/goal.svg" alt="" /></div>
					<div><img src="images/icons/google .svg" alt="" /></div>
					<div><img src="images/icons/graph.svg" alt="" /></div>
					<div><img src="images/icons/icecream.svg" alt="" /></div>
					<div><img src="images/icons/imac.svg" alt="" /></div>
					<div><img src="images/icons/ipad.svg" alt="" /></div>
					<div><img src="images/icons/iphone.svg" alt="" /></div>
					<div><img src="images/icons/key.svg" alt="" /></div>
					<div><img src="images/icons/lettersymbol.svg" alt="" /></div>
					<div><img src="images/icons/lock.svg" alt="" /></div>
					<div><img src="images/icons/loop.svg" alt="" /></div>
					<div><img src="images/icons/macbook.svg" alt="" /></div>
					<div><img src="images/icons/magic.svg" alt="" /></div>
					<div><img src="images/icons/magicmouse.svg" alt="" /></div>
					<div><img src="images/icons/mail.svg" alt="" /></div>
					<div><img src="images/icons/map.svg" alt="" /></div>
					<div><img src="images/icons/medal.svg" alt="" /></div>
					<div><img src="images/icons/mic.svg" alt="" /></div>
					<div><img src="images/icons/money.svg" alt="" /></div>
					<div><img src="images/icons/mortarboard.svg" alt="" /></div>
					<div><img src="images/icons/mountain.svg" alt="" /></div>
					<div><img src="images/icons/news.svg" alt="" /></div>
					<div><img src="images/icons/paper-bag.svg" alt="" /></div>
					<div><img src="images/icons/pc.svg" alt="" /></div>
					<div><img src="images/icons/pencil.svg" alt="" /></div>
					<div><img src="images/icons/pencils.svg" alt="" /></div>
					<div><img src="images/icons/picture.svg" alt="" /></div>
					<div><img src="images/icons/pig.svg" alt="" /></div>
					<div><img src="images/icons/pills.svg" alt="" /></div>
					<div><img src="images/icons/play.svg" alt="" /></div>
					<div><img src="images/icons/printer.svg" alt="" /></div>
					<div><img src="images/icons/responsive.svg" alt="" /></div>
					<div><img src="images/icons/retina.svg" alt="" /></div>
					<div><img src="images/icons/ring.svg" alt="" /></div>
					<div><img src="images/icons/rocket.svg" alt="" /></div>
					<div><img src="images/icons/rss.svg" alt="" /></div>
					<div><img src="images/icons/safe.svg" alt="" /></div>
					<div><img src="images/icons/save.svg" alt="" /></div>
					<div><img src="images/icons/search.svg" alt="" /></div>
					<div><img src="images/icons/settings.svg" alt="" /></div>
					<div><img src="images/icons/shield.svg" alt="" /></div>
					<div><img src="images/icons/shirt.svg" alt="" /></div>
					<div><img src="images/icons/skateboard.svg" alt="" /></div>
					<div><img src="images/icons/spray.svg" alt="" /></div>
					<div><img src="images/icons/storage.svg" alt="" /></div>
					<div><img src="images/icons/support.svg" alt="" /></div>
					<div><img src="images/icons/ticket.svg" alt="" /></div>
					<div><img src="images/icons/toilet-paper.svg" alt="" /></div>
					<div><img src="images/icons/touch.svg" alt="" /></div>
					<div><img src="images/icons/trash.svg" alt="" /></div>
					<div><img src="images/icons/trip-bag.svg" alt="" /></div>
					<div><img src="images/icons/trunk.svg" alt="" /></div>
					<div><img src="images/icons/ubmrella.svg" alt="" /></div>
					<div><img src="images/icons/user-interface.svg" alt="" /></div>
					<div><img src="images/icons/video.svg" alt="" /></div>
					<div><img src="images/icons/weather.svg" alt="" /></div>
					<div><img src="images/icons/wi-fi.svg" alt="" /></div>
					<div><img src="images/icons/wine.svg" alt="" /></div>
					<div><img src="images/icons/yinyang.svg" alt="" /></div>
        </div><!-- /.demo-content -->
      </div><!-- /.demo-row -->

    </div><!-- /.container -->


    <!-- Load JS here for greater good =============================-->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="js/bootstrap-switch.js"></script>
    <script src="js/flatui-checkbox.js"></script>
    <script src="js/flatui-radio.js"></script>
    <script src="js/holder.js"></script>
    <script src="js/flatui-fileinput.js"></script>
    <script src="js/jquery.tagsinput.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>
    <script src="js/application.js"></script>
  </body>
</html>